<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect, toRefs } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { mapObj } from '../mapInfoObj/initMap';
import {initChartPie,getCountryAndCount} from './astar.js'

const props = defineProps({
    portList: {
        type: Array,
        default: () => []
    },
    portLayerList: {
        type: Array,
        default: () => []
    }
})
const { portList,portLayerList } = toRefs(props)

onMounted(()=>{
    nextTick(()=>{
        getCountryAndCount().then(res=>{
            initChartPie(res.data.data, document.getElementById('chart1'))
        })
        // initChartPie([], document.getElementById('chart1'))
    })
})

const search = ref('')
const handleSearch = () => {
    // 在portList中查找第一个类似的
    const res = portList.value.find(item => {
        return item.port_name.includes(search.value)||item.port_cn.includes(search.value)
    })
    if (res) {
        mapObj.map.flyTo([res.lat, res.lon], 6)
        // 激活该点
        portLayerList.value.forEach(layer => {
            if (layer._latlng && layer._latlng.lat == res.lat && layer._latlng.lng == res.lon) {
                layer.openPopup()
            }
        })
    }
}
</script>

<template>
    <div class="base">
        <div style="padding: 5px;">
            <el-input v-model="search" placeholder="查询港口">
                <template #append>
                    <el-button :icon="Search" @click="handleSearch" />
                </template>
            </el-input>
        </div>
        <div id="chart1" style="height: 400px;width: 100%;overflow: hidden;">

        </div>
    </div>
</template>

<style lang="less" scoped>
.base {
    height: 100%;
    width: 100%;
}
</style>